<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*包含a开头的*/
			p[class^="a"] {
				color: red;
			}
			/*选择具有class属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素*/
			p[class|="test"] {
				background: blue;
			}
			/*选择具有class属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。*/
			p[class~="abc"] {
				background: yellow;
			}
			/*选择具有att属性且属性值为包含val的字符串的E元素*/
			p[class*="abc"] {
				font-size: 30px;
			}
			/*选择具有att属性且属性值为以val结尾的字符串的E元素。*/
			p[class$="123"] {
				font-weight: bold;
			}
			p[class^="y"] {
				text-align: center;
			}
		</style>
	</head>

	<body>
		<p class="a">测试数据1</p>
		<p class="qq">测试数据2</p>
		<p class="xyz abc">测试数据3</p>
		<p class="aa123">测试数据4</p>
		<p class="test-abc">测试数据5</p>
		<p class="hello-z-world">测试数据6</p>
		<p class="y-1">测试数据7</p>
		<p class="y-2">测试数据7</p>
	</body>

</html>